<template>
    <div class="dormitory-application" ref="application">
        <el-form :inline="true" :model="searchForm" size="mini">
            <el-form-item label="姓名">
                <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="申请类型">
                <el-select v-model="searchForm.type" placeholder="请选择申请类型">
                    <el-option label="晚归申请" value="0"></el-option>
                    <el-option label="教室使用申请" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchForm.type" placeholder="请选择状态">
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="通过审核" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleRefresh">刷新</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="ukId"
                border
                default-expand-all
                stripe
                size="mini">
            <el-table-column
                    prop="name"
                    label="申请者姓名"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="申请类型"
                    sortable
                    width="180">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type == '0'" size="mini">晚归申请</el-tag>
                    <el-tag v-if="scope.row.type == '1'" size="mini">教室使用申请</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系方式"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="申请备注"
                    width="*">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    sortable
                    width="180">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == '0'" type="primary" size="mini">待批准</el-tag>
                    <el-tag v-if="scope.row.status == '1'" type="success" size="mini">通过</el-tag>
                    <el-tag v-if="scope.row.status == '2'" type="danger" size="mini">未通过审核</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="startTime"
                    label="开始时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="endTime"
                    label="结束时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="260">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                    <el-button
                            size="mini"
                            type="success"
                            @click="handleAcceptStatus(scope.$index, scope.row)">批准
                    </el-button>
                    <el-button
                            size="mini"
                            type="warning"
                            @click="handleRefuseStatus(scope.$index, scope.row)">审核未通过
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <dormitory-pagination :parentMethod="listApplication"
                              :pagination="this.$store.state.Navigation.pagination"></dormitory-pagination>
    </div>
</template>

<script>

    import DormitoryPagination from "../../components/DormitoryPagination";
    import PageSizeUtils from "../../../../utils/PageSizeUtils";

    import {
        listApplicationByCurrentUser,
        deleteApplication,
        updateApplicationAcceptStatus,
        updateApplicationRefuseStatus,
    } from "../../../../api/daily/application";

    export default {
        name: "Application",
        components: {DormitoryPagination,},
        data() {
            return {
                tableData: [],
                searchForm: {
                    name: "",
                    type: "",
                    status: "",
                },

            };
        },

        methods: {
            listApplication(current, size) {
                listApplicationByCurrentUser(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.applications.records;
                    PageSizeUtils.setPagination(response.data.applications)
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate(index, row) {

            },
            handleEdit(index, row) {
            },
            handleDelete(index, row) {
                deleteApplication(row.ukId).then(response => {
                    this.listApplication(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {
                this.listApplication(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleRefresh() {
                this.listApplication(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleReset() {
                this.searchForm = {}
            },
            handleSave() {
            },
            handleAcceptStatus(index, row) {
                if (row.status == 1) {
                    alert("该条申请已经通过审核！")
                } else {
                    updateApplicationAcceptStatus(row.ukId).then(response => {
                        this.listApplication(this.$store.state.Navigation.pagination.current,
                            this.$store.state.Navigation.pagination.size);
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            handleRefuseStatus(index, row) {
                if (row.status == 2) {
                    alert("该条申请已经处理为 不批准！")
                } else {
                    let b = confirm("确定批准该条申请？");
                    if (b == true) {
                        updateApplicationRefuseStatus(row.ukId).then(response => {
                            this.listApplication(this.$store.state.Navigation.pagination.current,
                                this.$store.state.Navigation.pagination.size);
                        }).catch(error => {
                            console.log(error)
                        })
                    }
                }
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            },

        },
        created() {
            PageSizeUtils.setPagination({})
            this.listApplication(this.$store.state.Navigation.pagination.current,
                this.$store.state.Navigation.pagination.size);
        }
    }
</script>

<style scoped>
    .dormitory-application {
        background-color: #ffffff;
        border: #ffffff 3px solid;
    }
</style>

